<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <style>
        .slider {
            background-color: #fff;
            width: 278px;
            height: 250px;
            z-index: 999;
            box-sizing: border-box;
            padding: 9px;
            border-radius: 6px;
            box-shadow: 0 0 11px 0 #999999;
            position: relative;
        }

        .slider .content {
            width: 100%;
            height: 159px;
            position: relative;
        }

        .bg-img-div {
            width: 100%;
            height: 100%;
            position: absolute;
            transform: translate(0px, 0px);
            z-index: 0;
        }

        .bg-click-div {
            z-index: 1;
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
        }

        .slider-img-div {
            height: 100%;
            position: absolute;
            transform: translate(0px, 0px);
        }

        .bg-img-div img {
            width: 100%;
        }

        .slider-img-div img {
            height: 100%;
        }

        .slider .slider-move {
            height: 40px;
            width: 100%;
            position: relative;
        }

        .slider .bottom {
            height: 19px;
            width: 100%;
            margin-top: 10px;
        }

        .refresh-btn, .close-btn, .slider-move-track, .slider-move-btn {
            background: url(https://static.geetest.com/static/ant/sprite.1.2.4.png) no-repeat;
        }
        .close-btn:hover, .refresh-btn:hover {
            cursor: pointer
        }
        .refresh-btn, .close-btn {
            display: inline-block;
        }

        .slider-move .slider-move-track {
            line-height: 38px;
            font-size: 14px;
            text-align: center;
            white-space: nowrap;
            color: #88949d;
            -moz-user-select: none;
            -webkit-user-select: none;
            user-select: none;
        }

        .slider {
            user-select: none;
        }

        .slider-move .slider-move-btn {
            transform: translate(0px, 0px);
            background-position: -5px 11.79625%;
            position: absolute;
            top: -12px;
            left: 0;
            width: 66px;
            height: 66px;
        }

        .submit-div {
            width: 100%;
            height: 40px;
            position: relative;
            margin: 5px auto;
        }

        .bottom .close-btn {
            width: 20px;
            height: 20px;
            background-position: 0 44.86874%;
        }

        .bottom .refresh-btn {
            width: 20px;
            height: 20px;
            background-position: 0 81.38425%;
        }

        .tip-img {
            width: 130px;
            position: absolute;
            right: 5px;
        }

        .slider-move-span {
            font-size: 18px;
            display: inline-block;
            height: 40px;
            line-height: 40px;
        }

        .click-span {
            position: absolute;
            left: 0;
            top: 0;
            border-radius: 50px;
            background-color: #409eff;
            width: 20px;
            height: 20px;
            text-align: center;
            line-height: 20px;
            color: #fff;
            border: 2px solid #fff;
        }

        .submit-btn {
            height: 40px;
            width: 120px;
            line-height: 40px;
            text-align: center;
            background-color: #409eff;
            color: #fff;
            font-size: 15px;
            box-sizing: border-box;
            border: 1px solid #409eff;
            float: right;
            border-radius: 5px;
        }
    </style>
</head>

<body>
<div class="slider">
    <div class="slider-move">
        <span class="slider-move-span">请依次点击:</span><img src="" class="tip-img">
    </div>
    <div class="content">
        <div class="bg-img-div">
            <img id="bg-img" src="" alt/>
        </div>
        <div class="bg-click-div">

        </div>
    </div>
    <div class="bottom">
        <div class="close-btn" id="slider-close-btn"></div>
        <div class="refresh-btn" id="slider-refresh-btn"></div>
    </div>
</div>
<script>
    let start = 0;
    let startY = 0;
    let currentCaptchaId = null;
    let movePercent = 0;
    const bgImgWidth = $(".bg-img-div").width();
    let end = 206;
    let startSlidingTime;
    let entSlidingTime;
    const trackArr = [];
    let clickCount = 0;
    $(function () {
        refreshCaptcha();
    })
    $(".content").click(function (event) {
        console.log(event);
        clickCount++;
        if (clickCount === 1) {
            startSlidingTime = new Date();
            // move 轨迹
            window.addEventListener("mousemove", move);
        }
        trackArr.push({
            x: event.offsetX,
            y: event.offsetY,
            type: "click",
            t: (new Date().getTime() - startSlidingTime.getTime())
        });
        const left = event.offsetX - 10;
        const top = event.offsetY - 10;
        $(".bg-click-div").append("<span class='click-span' style='left:" + left + "px;top: " + top + "px'>" + clickCount + "</span>")
        if (clickCount === 4) {
            // 校验
            entSlidingTime = new Date();
            window.removeEventListener("mousemove", move);
            valid();
        }
    });

    function move(event) {
        if (event instanceof TouchEvent) {
            event = event.touches[0];
        }
        console.log("x:", event.offsetX, "y:", event.offsetY, "time:" ,new Date().getTime() - startSlidingTime.getTime());
        trackArr.push({x: event.offsetX, y:event.offsetY, t: (new Date().getTime() - startSlidingTime.getTime()), type: "move"});
    }


    $("#slider-close-btn").click(() => {

    });

    $("#slider-refresh-btn").click(() => {
        refreshCaptcha();
    });

    function valid() {
        console.log("=======================")
        console.log("aaa",trackArr);
        console.log("startTime", startSlidingTime);
        console.log("endTime", entSlidingTime);
        console.log("track", JSON.stringify(trackArr));
        let data = {
            bgImageWidth: $(".bg-img-div").width(),
            bgImageHeight: $(".content").height(),
            templateImageWidth: -1,
            templateImageHeight: -1,
            startSlidingTime: startSlidingTime,
            entSlidingTime: entSlidingTime,
            trackList: trackArr
        };
        console.log(data);


        $.ajax({
            type:"POST",
            url:"/check?id=" + currentCaptchaId,
            contentType: "application/json", //必须这样写
            dataType:"json",
            data:JSON.stringify(data),//schoolList是你要提交是json字符串
            success:function (res) {
                console.log(res);
                if (res) {
                    alert("验证成功!!!");
                }
                refreshCaptcha();
            }

        })
    }

    function refreshCaptcha() {
        $.get("/gen?type=WORD_IMAGE_CLICK", function (data) {
            reset();
            currentCaptchaId = data.id;
            $("#bg-img").attr("src", data.captcha.backgroundImage);
            $("#slider-img").attr("src", data.captcha.templateImage);
            $(".tip-img").attr("src", data.captcha.templateImage);
        })
    }

    function reset() {
        $("#slider-move-btn").css("background-position", "-5px 11.79625%")
        $("#slider-move-btn").css("transform", "translate(0px, 0px)")
        $("#slider-img-div").css("transform", "translate(0px, 0px)")
        start = 0;
        startSlidingTime = null;
        entSlidingTime = null;
        trackArr.length = 0;
        $(".bg-click-div span").remove();
        clickCount = 0;
        movePercent = 0;
        currentCaptchaId = null;
        startY = 0;
        window.removeEventListener("mousemove", move);
    }
</script>
</body>
</html>
